<template>
  <div class="app-container">
    <!-- 商品列表 -->
    <!-- 搜索工作栏 -->
    <SearchForm
      :queryParams="queryParams"
      :searchForm="searchForm"
    ></SearchForm>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" align="center" label="序号" width="50" />
      <el-table-column prop="address" label="商品id"> </el-table-column>
      <el-table-column prop="date" label="商品图片" width="180">
        <template>
          <el-image style="width: 100px; height: 100px" :src="tableData[0].url">
          </el-image
        ></template>
      </el-table-column>
      <el-table-column prop="name" label="工厂码" width="180">
      </el-table-column>
      <el-table-column prop="address" label="商品信息"> </el-table-column>

      <el-table-column prop="address" label="品相"> </el-table-column>
      <el-table-column prop="address" label="尺码"> </el-table-column>
      <el-table-column prop="address" label="品牌"> </el-table-column>
      <el-table-column prop="address" label="款式"> </el-table-column>
      <el-table-column prop="address" label="出厂价"> </el-table-column>
      <el-table-column prop="address" label="商品状态"> </el-table-column>
      <el-table-column prop="address" label="创建时间"> </el-table-column>
      <el-table-column prop="address" label="款式"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      total: 0,
      tableData: [
        {
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
      ],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      searchForm: {
        //显示搜索条件
        showSearch: true,
        //搜索条件
        search: [
          {
            placeholder: "请选择所属供电所",
            prop: "transformerId",
            type: "select",
            selectList: [],
            label: "transformerName",
            value: "id",
            clickFun: this.handleChangeSelect,
          },

          {
            prop: "createTime",
            startPlaceholder: "开始日期",
            endPlaceholder: "结束日期",
            type: "daterange",
          },
          {
            placeholder: "户号",
            prop: "doorNo",
            type: "number",
            clickFun: this.handleQuery,
          },
        ],

        queryTable: this.getList,
      },
    };
  },
  computed: {},
  created() {
    this.getList();
  },
  mounted() {},
  watch: {},
  methods: {
    getList() {},
  },
  components: {},
};
</script>

<style scoped lang="scss"></style>
